<template>
    <div>
        <!-- 题目部分 -->
        <div class="header">
            <h3>{{workTest.title}}</h3>
            <p>
                你的得分：{{studentWakeAnswer.score}}
                测试范围：第{{workTest.startRange}}章-第{{workTest.endRange}}章
            </p>
        </div>

        <!-- 选择题部分 -->
        <div class="choose">
            <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
            <h4 v-if="workTest.chooseNumber>0">一、选择题:在每小题给出的四个选项中,只有一个选项是符合题目要求的。
                一共{{workTest.chooseNumber}}个题，每个小题{{workTest.chooseScore}}分，共{{workTest.chooseNumber*workTest.chooseScore}}分。
            </h4>
            <div class="chooseOption" v-for="(item,index) in workTest.workChooseList" :key="item.order">
                <p> ( {{item.order}} ) {{ item.description }}（）</p>
                <el-radio-group v-model="answer.choose.find(option=>option.order===item.order).answer" :disabled=true>
                    <el-radio :label="1"> A. {{item.chooseOption.optionA}} </el-radio><br>
                    <el-radio :label="2"> B. {{item.chooseOption.optionB}} </el-radio><br>
                    <el-radio :label="3"> C. {{item.chooseOption.optionC}} </el-radio><br>
                    <el-radio :label="4"> D. {{item.chooseOption.optionD}} </el-radio><br>
                </el-radio-group>
                <!-- 答案展示 -->
                <div class="wokeAnswerView">
                    <span v-if="answer.choose.find(option=>option.order===item.order).isRight===1">你的答案为:</span><span style="color: #19D512; font-size: 20px;"
                        v-if="answer.choose.find(option=>option.order===item.order).isRight===1">&nbsp;
                        {{getanswerBynumber(answer.choose.find(option=>option.order===item.order).answer)}}
                    </span>
                    <span v-if="answer.choose.find(option=>option.order===item.order).isRight===0">你的答案为:</span><span style="color: red; font-size: 20px;"
                        v-if="answer.choose.find(option=>option.order===item.order).isRight===0">&nbsp;
                        {{getanswerBynumber(answer.choose.find(option=>option.order===item.order).answer)}}
                    </span>
                    <span style="color: red; font-size: 20px;"
                        v-if="answer.choose.find(option=>option.order===item.order).answer===0">&nbsp;未选择
                    </span>
                    <span style="color: #1D6C72; font-size: 20px;"
                        v-if="answer.choose.find(option=>option.order===item.order).isRight===0">
                        正确答案：{{getanswerBynumber(answer.choose.find(option=>option.order===item.order).rightAnswer)}}
                    </span>
                </div>
            </div>
        </div>

        <!-- 判断题部分 -->
        <div class="judge">
            <!-- 标题 如果选择题模块数据的长度为零,那么就不显示选择题模块的大标题 -->
            <h4 v-if="workTest.judgeNumber>0"><span v-if="workTest.chooseNumber>0">二</span><span
                    v-if="workTest.chooseNumber===0">一</span>、判断题:请判断下列语句是否正确。
                一共{{workTest.judgeNumber}}个题，每个小题{{workTest.judgeScore}}分，共{{workTest.judgeNumber*workTest.judgeScore}}分。
            </h4>
            <div class="judgeOption" v-for="(item) in workTest.workJudgeList" :key="item.order">
                <p> ( {{workTest.chooseNumber+item.order}} ) {{ item.description }}</p>
                <el-radio-group v-model="answer.judge.find(option=>option.order===item.order).answer" :disabled=true>
                    <el-radio :label="1"> 正确 </el-radio><br>
                    <el-radio :label="0"> 错误 </el-radio><br>
                </el-radio-group>
                <!-- 答案展示 -->
                <div>
                    <span>你的答案为:</span>
                    <span style="color: #19D512;"
                        v-if="answer.judge.find(option=>option.order===item.order).isRight===1">
                        &nbsp;{{answer.judge.find(option=>option.order===item.order).answer===1?'正确':null}}
                        {{answer.judge.find(option=>option.order===item.order).answer===0?'错误':null}}
                    </span>
                    <span style="color: red; font-size: 20px;"
                        v-if="answer.judge.find(option=>option.order===item.order).isRight===0">
                        &nbsp;{{answer.judge.find(option=>option.order===item.order).answer===1?'正确':null}}
                        {{answer.judge.find(option=>option.order===item.order).answer===0?'错误':null}}
                    </span>
                    <span style="color: red; font-size: 20px;"
                        v-if="answer.judge.find(option=>option.order===item.order).answer===-1">&nbsp;未选择
                    </span>
                    <span style="color: #1D6C72; font-size: 20px;"
                        v-if="answer.judge.find(option=>option.order===item.order).isRight===0">
                        答案：{{answer.judge.find(option=>option.order===item.order).rightAnswer===1?'正确':'错误'}}
                    </span>
                </div>
            </div>
        </div>

        <!-- 程序填空题部分 -->
        <div class="fillEmpty">
            <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
            <h4 v-if="workTest.fillEmptyNumber>0">
                <span v-if="workTest.chooseNumber>0 && workTest.judgeNumber>0">三</span>
                <span v-else-if="workTest.chooseNumber===0&& workTest.judgeNumber===0">一</span>
                <span v-else>二</span>
                、程序填空题:请阅读下列代码，按照题目要求在代码中的横线处填上合适的语句使代码满足注释，且代码语句满足逻辑。
                一共{{workTest.fillEmptyNumber}}个题。
            </h4>
            <div v-for="(item,index) in workTest.workFillEmptyList" :key="index" class="fillEmptyOption">
                <p> ( {{workTest.chooseNumber+workTest.judgeNumber+item.order}} ) {{ item.description }} 【共{{item.scores
                    }}分】</p>
                <div class="fillEmptyOption_code_answer">
                    <!-- 代码盒子 -->
                    <div class="fillEmptyOption_code">
                        <pre><code>{{ item.code }}</code></pre>
                    </div>
                    <!-- 学生答案盒子 -->
                    <div class="fillEmptyOption_answer">
                        <div v-for="(item,index_answer) in answer.fillEmpty[index].answers" :key="index_answer">
                            <el-input placeholder="请输入你的答案" v-model="item.answer" :readonly="true">
                                <template slot="prepend">第{{item.order}}空</template>
                                <template slot="append">{{item.score}}分</template>
                            </el-input>
                            <span v-if="item.isRight===0" style="color: red;">
                                错误&nbsp;&nbsp;正确答案：&nbsp;&nbsp;
                            </span>
                            <span v-if="item.isRight===0">{{ item.rightAnswer}}
                            </span>
                            <span v-if="item.isRight===1">
                                正确
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 编程题 -->
        <div class="encode">
            <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
            <h4 v-if="workTest.encodeNumber>0">
                <span v-if="workTest.chooseNumber>0 && workTest.judgeNumber>0 && workTest.fillEmptyNumber>0">四</span>

                <span
                    v-else-if="workTest.chooseNumber===0 && workTest.judgeNumber>0 && workTest.fillEmptyNumber>0">三</span>
                <span
                    v-else-if="workTest.chooseNumber>0 && workTest.judgeNumber===0 && workTest.fillEmptyNumber>0">三</span>
                <span
                    v-else-if="workTest.chooseNumber>0 && workTest.judgeNumber>0 && workTest.fillEmptyNumber===0">三</span>

                <span
                    v-else-if="workTest.chooseNumber===0 && workTest.judgeNumber===0 && workTest.fillEmptyNumber>0">二</span>
                <span
                    v-else-if="workTest.chooseNumber>0 && workTest.judgeNumber===0 && workTest.fillEmptyNumber===0">二</span>
                <span
                    v-else-if="workTest.chooseNumber===0 && workTest.judgeNumber>0 && workTest.fillEmptyNumber===0">二</span>

                <span
                    v-else-if="workTest.chooseNumber===0&& workTest.judgeNumber===0 && workTest.fillEmptyNumber===0">一</span>
                、编程题:根据题目要求写出代码。要求上传一个java文件，且文件名和主类的名称一致。
                一共{{workTest.encodeNumber}}个题。
            </h4>
            <div v-for="(item,index) in workTest.workEncodeBOList" :key="index" class="item">
                <p> ( {{workTest.chooseNumber+workTest.judgeNumber+workTest.fillEmptyNumber + index + 1}} )
                    {{ item.title }}
                    【 {{item.score}}分】
                </p>
                <!-- 题目描述 -->
                <div>
                    <p>{{item.description}}</p>
                    <p v-if="item.suggest !=null" style="font-weight: bold;">提示:&nbsp;&nbsp;{{item.suggest}}</p>
                </div>
                <el-row class="result_and_runResult">
                    <!-- 结果示例和这个运行结果两边分 -->
                    <!-- 结果示例 -->
                    <el-col :span="12">
                        <el-card class="result_example">
                            <h3>结果示例</h3>
                            <div v-for="(item01,index01) in item.resultExampleBOList" :key="index01" class="result">
                                <span class="exceple">示例{{index01+1}}: </span>
                                <span class="result_to">输入:&nbsp;&nbsp;&nbsp;{{item01.input}}</span>
                                <div style="display: flex;justify-content: flex-start;">
                                    <div>
                                        <span class="result_to">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输出:&nbsp;&nbsp;&nbsp;
                                        </span>
                                    </div>
                                    <div class="result_to">
                                        {{item01.output}}
                                    </div>
                                </div>
                                <p class="result_to">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;解释:&nbsp;&nbsp;&nbsp;{{item01.explain}}
                                </p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <!-- 运行结果 -->
                        <el-card class="run_result">
                            <div>
                                <span>在此处上传文件：</span>
                                <el-button>选择文件</el-button>
                                <p>要求：只能上传java文件，且文件名应该和主类类名称相同</p>
                                <br>
                            </div>

                            <div>
                                <!-- 两行显示，第一行显示结果，比如运行成功，运行失败，测试用例不通过 -->
                                <el-tag v-if="encodeResultView.find(li => li.id === item.id).state===0"
                                    type="success">运行成功</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===1"
                                    type="danger">运行失败</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===2"
                                    type="danger">编译失败</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===3"
                                    type="danger">运行时间超出限制，可能是因为死循环</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===4"
                                    type="danger">网络错误，请联系管理员</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===5"
                                    type="danger">测试用例不通过</el-tag>
                                <el-tag v-else-if="encodeResultView.find(li => li.id === item.id).state===6"
                                    type="danger">未提交代码</el-tag><br>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        created() {

            this.workId = Number(this.$route.params.id)
            this.userId = Number(window.sessionStorage.userId);
            this.getworkAnswer()
        },
        data() {
            return {
                workId: null,
                userId: null,
                // 题目集数据
                workTest: { title: null },
                studentWakeAnswer: null,
                answer: {
                    workId: null,
                    userId: null,
                    choose: [],
                    judge: [],
                    fillEmpty: [],
                    encode: []
                },
                encodeResultView: []
            };
        },
        methods: {
            // 发请求，获取题目数据，根据workId
            async getworkTestByWorkId() {
                const { data: res } = await this.$axios.get('/getworkTestByWorkId', {
                    params: {
                        workId: this.workId,// 题目集id
                    }
                })
                if (res.code === 200) {
                    this.answer.workId = this.workId
                    this.answer.userId = this.userId
                    this.workTest = res.data

                    // 补充选择题答案
                    for (let i = 0; i < this.workTest.workChooseList.length; i++) {
                        this.answer.choose.push({
                            chooseId: this.workTest.workChooseList[i].chooseId,
                            order: i + 1,
                            answer: this.studentWakeAnswer.chooseAnswerViewBOList[i].studentAnswer,
                            isRight: this.studentWakeAnswer.chooseAnswerViewBOList[i].isRight,
                            rightAnswer: this.studentWakeAnswer.chooseAnswerViewBOList[i].rightAnswer
                        })
                    }
                    // 补充判断题答案
                    for (let i = 0; i < this.workTest.workJudgeList.length; i++) {
                        this.answer.judge.push({
                            judgeId: this.workTest.workJudgeList[i].judgeId,
                            order: i + 1,
                            answer: this.studentWakeAnswer.judgeAnswerViewBOList[i].studentAnswer,
                            isRight: this.studentWakeAnswer.judgeAnswerViewBOList[i].isRight,
                            rightAnswer: this.studentWakeAnswer.judgeAnswerViewBOList[i].rightAnswer
                        })
                    }
                    // 补充程序填空题答案
                    for (let i = 0; i < this.workTest.workFillEmptyList.length; i++) {
                        this.answer.fillEmpty.push({
                            fillEmptyId: this.workTest.workFillEmptyList[i].fillEmptyId,
                            order: i + 1,
                            answers: []
                        })
                        for (let j = 0; j < this.workTest.workFillEmptyList[i].options.length; j++) {
                            this.answer.fillEmpty[i].answers.push({
                                order: this.workTest.workFillEmptyList[i].options[j].order,
                                answer: this.studentWakeAnswer.fillAnswerViewBOList[i][j].studentAnswer,
                                score: this.workTest.workFillEmptyList[i].options[j].score,
                                rightAnswer: this.studentWakeAnswer.fillAnswerViewBOList[i][j].rightAnswer,
                                isRight: this.studentWakeAnswer.fillAnswerViewBOList[i][j].isRight
                            })
                        }
                    }
                    // 补充编程题答案
                    for (let i = 0; i < this.workTest.workEncodeBOList.length; i++) {
                        this.answer.encode.push({
                            encodeId: this.workTest.workEncodeBOList[i].id,
                            state: null,
                            runTime: null,
                            message: null,
                            compileTime: null
                        })// 默认得分是0分，然后这个正确与否是错误
                    }
                    // 补充编程题展示
                    for (let i = 0; i < this.workTest.workEncodeBOList.length; i++) {
                        this.encodeResultView.push({
                            id: this.workTest.workEncodeBOList[i].id,
                            state: this.studentWakeAnswer.encodeAnswerViewBOList[i].state,
                            message: null, compileTime: null, runTime: null
                        })// 默认得分是0分，然后这个正确与否是错误
                    }
                    return
                }
                this.$message.error("网络错误")
            },
            // 答案信息展示
            getanswerBynumber(Number) {
                if (Number === 1) return 'A'
                if (Number === 2) return 'B'
                if (Number === 3) return 'C'
                if (Number === 4) return 'D'
            },


            // 发请求，获取答案数据
            async getworkAnswer() {
                const { data: res } = await this.$axios.get('/getStudentAnswer', {
                    params: {
                        workId: this.workId,// 题目集id
                        userId: this.userId
                    }
                })
                if (res.code === 200) {
                    this.studentWakeAnswer = res.data
                    return this.getworkTestByWorkId()
                }
                this.$message.error("网络错误")

            }

        }
    }
</script>

<style lang="less" scoped>
    .header {
        h3 {
            font-size: 24px;
            text-align: center;
        }

        p {
            text-align: right;
            margin-right: 100px;

            .el-button {
                margin-right: 32px;
            }
        }
    }

    .choose {
        margin: auto 50px;

        h4 {
            font-size: 20px;
        }

        .chooseOption {
            .el-radio:not(:last-child) {
                margin-bottom: 8px;
            }

            padding-left: 30px;
            border: 1px solid #000;
            margin-bottom: 20px;
            transition: box-shadow 0.3s ease;
            /* 添加过渡效果 */
        }

        .chooseOption:hover {
            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
            /* 当鼠标悬停时添加阴影 */
        }
    }

    /* 判断题 */
    .judge {
        margin: auto 50px;

        h4 {
            font-size: 20px;
        }

        .judgeOption {
            .el-radio:not(:last-child) {
                margin-bottom: 8px;
            }

            padding-left: 30px;
            border: 1px solid #000;
            margin-bottom: 20px;
            transition: box-shadow 0.3s ease;
            /* 添加过渡效果 */
        }

        .judgeOption:hover {
            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
            /* 当鼠标悬停时添加阴影 */
        }
    }

    /* 程序填空题 */
    .fillEmpty {
        margin: auto 50px;

        h4 {
            font-size: 20px;
        }

        .fillEmptyOption {
            p {
                margin-bottom: 0px;
            }

            .fillEmptyOption_code_answer {
                display: flex;
                justify-content: space-between;

                .fillEmptyOption_code {
                    width: 60%;
                    pre {
                        white-space: pre-wrap;
                        background-color: #f2f2f2;
                        margin-left: 30px;
                        font-size: 16px;
                        line-height: 16px;
                        margin-bottom: 0;
                        padding-bottom: 10px;
                    }
                }

                .fillEmptyOption_answer {
                    width: 400px;

                    div {
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }

    /* 编程题 */
    .encode {

        .result_and_runResult {
            .result_example {
                .result {
                    p {
                        margin: 0;
                        padding: 0;
                    }

                    .exceple {
                        font-weight: 700;
                    }

                    .result_to {
                        white-space: pre-wrap;
                        font-family: "微软雅黑";
                        font-weight: 300;
                    }
                }

                width: 500px;
            }

            .run_result {
                margin-right: 30px;
                width: 500px;

                .el-tag {
                    text-align: center;
                }
            }
        }

        margin: auto 50px;

        h4 {
            font-size: 20px;
        }

        .item {
            border: 1px solid #000;
            padding-left: 20px;
            margin-bottom: 20px;
        }
    }
</style>